<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>首页Tab</title>
		<link href="../../css/mui.min.css" rel="stylesheet" type="text/css" />
		<link href="../../css/app.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			
		</style>
	</head>

	<body>
		<nav class="mui-bar mui-bar-tab" style="background-color: #FFFFFF;">
			<a id="tabhome" class="mui-tab-item mui-active" href="home.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a id="tabnews" class="mui-tab-item" href="search.html">
				<span class="mui-icon mui-icon-search"></span>
				<span class="mui-tab-label">搜索</span>
			</a>
			<a id="tabcart" class="mui-tab-item" href="cart.html">
				<span class="mui-icon gh-icon-cart"><span id="cartCount" class="mui-badge" style="display: none;"></span></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a id="tabmycenter" class="mui-tab-item" href="mycenter.html">
				<span class="mui-icon gh-icon-mycenter"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui-extend.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			
			// ---------------------------------------------页面构建-------------------------------------------
			var tabHome, tabSearch, tabCart, tabMycenter;
			var subpages = ['home.html', 'search.html', 'cart.html', 'mycenter.html'];
				var subpage_style = {
				top: '44px',
				bottom: '51px'
			};
			var aniShow = {};
			//创建子页面，首个选项卡页面显示，其它均隐藏；
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				for(var i = 0; i < 4; i++) {
					var temp = {};
					var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
					switch(i) {
						case 0:
							temp[subpages[i]] = "true";
							mui.extend(aniShow, temp);
							tabHome = sub;
							break;
						case 1:
							tabSearch = sub;
							sub.hide();
							break;
						case 2:
							tabCart = sub;
							sub.hide();
							break;
						case 3:
							tabMycenter = sub;
							sub.hide();
							break;
						default:
							break;
					}
					self.append(sub);
				}
			});
			// ---------------------------------------------dom事件绑定-------------------------------------------
			var activeTab = subpages[0];
						//选项卡点击事件
			mui('.mui-bar-tab').on('tap', 'a', function(e) {
				var targetTab = this.getAttribute('href');
				var targetTabId = this.id;
//				console.log(targetTab);
				if(targetTab == activeTab) {
					return;
				}

				//显示目标选项卡
				if(mui.os.ios || aniShow[targetTab]) {
					plus.webview.show(targetTab);
				} else {
					var temp = {};
					temp[targetTab] = "true";
					mui.extend(aniShow, temp);
					plus.webview.show(targetTab, "fade-in", 300);
				}
				//隐藏当前;
				plus.webview.hide(activeTab);
				activeTab = targetTab;
			});
			
			//首页返回键处理
			//处理逻辑：1秒内，连续两次按返回键，则退出应用；
			var first = null;
			mui.back = function() {
				if(activeTab !== subpages[0]) {
					mui.trigger(document, 'gohome');
					return;
				}
				//首次按键，提示‘再按一次退出应用’
				if(!first) {
					first = new Date().getTime();
					mui.toast('再按一次退出');
					setTimeout(function() {
						first = null;
					}, 1000);
				} else {
					if(new Date().getTime() - first < 1000) {
						plus.runtime.quit();
					}
				}
			};
			
			// ---------------------------------------------webview事件绑定-------------------------------------------
		</script>
	</body>

</html>